<template>
	<view>
		<page-head :title="'个人资料'" :headtype="2" ></page-head>
		<view class="list marginAuto">
			<view class="item marginAuto">
				<view class="item-title">头像</view>
				<view class="item-icon flex" @click="uploadhead('headimg')">
					<image class="item-iconimg" v-if="!headimg" :src="apifun.serveimg+'headimg.png'" mode=""></image>
					<image class="item-iconimg" v-if="headimg" :src="apifun.URLimg+headimg" mode=""></image>
					<uv-icon name="arrow-right" size="14" color="#666666"></uv-icon>
				</view>
			</view>
			<view class="item marginAuto">
				<view class="item-title">昵称</view>
				<view class="item-icon">
					<input class="itemicon-input" v-model="nickname" type="text" placeholder="请输入昵称" />
				</view>
			</view>
		</view>
		<view class="marginAuto" style="width:600rpx;margin-top:200rpx;">
			<uv-button text="保存" @click="enter()" :customStyle="{
				'background':'#1686F8',
				'color':'#fff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'100rpx'
			}"></uv-button>
		</view>
	</view>
</template>

<script>
	export default { 
		data() {
			return {
				apifun:this.apifun,
				usermessage:{},
				headimg:'',
				nickname:'',
				mobile:''
			};
		},
		onLoad() {
			this.usermessage = uni.getStorageSync('usermsg');
			this.headimg = uni.getStorageSync('usermsg').avatar || '';
			this.nickname = uni.getStorageSync('usermsg').username || '';
			this.mobile = uni.getStorageSync('usermsg').mobile || '';
		},
		methods: {
			enter(){
				let that = this;
				let sendData = {
					username:that.nickname,
					avatar:that.headimg,
					mobile:this.mobile
				};
				if(that.nickname == ''){
					that.apifun.toast("请输入您要修改的昵称");
					return false
				};
				that.apifun.unirequest('/api/user/setUserInfo','post',sendData,(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						that.apifun.toast("修改成功");
					}else{
						that.apifun.toast(res.msg)
					}
				})
			},
			uploadhead(name){
				let that = this;
				that.apifun.uploadFileimg((res)=>{
					if(res.code == 200){
						let datas = res.data;
						that[name] = datas.src;
					}
				},this)
			}
		},
	};
</script>

<style>
	page{
		background: #F7F7F7;
	}
	/* list */
	.list{
		width: 690rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
	.item{
		width:94%;
		padding:20rpx 0;
		line-height:80rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #F0F0F0;
	}
	.item-title{
		color: #333333;
		font-size: 30rpx;
	}
	.item-icon{
		display: flex;
	}
	.item-iconimg{
		width:80rpx;
		height: 80rpx;
		margin-right:20rpx;
		border-radius:50%;
	}
	.itemicon-input{
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size:30rpx;
		color: #333;
		text-align: right;
		margin-right: 20rpx;
	}
	.item-iconi{
		color:#999999;
		font-size:40rpx;
	}
	.enterbtn{
		position: fixed;
		bottom:170rpx;
		width: 90%;
		left: 50%;
		margin-left: -45%;
	}
</style>